<template>
    <div class="dect-search">
    <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="字典名称111">
        <el-input v-model="formInline.dictName" placeholder="请输入字典名11称" style="width: 170px;" clearable />
        </el-form-item>
        <el-form-item label="字典类型">
        <el-input v-model="formInline.dictType" placeholder="请输入字典类型" style="width: 170px;" clearable />
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="formInline.dictStu" placeholder="字典状态" style="width: 170px;">
                <el-option label="正常" value="yes" />
                <el-option label="停用" value="no" />
            </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
            <el-date-picker
                v-model="formInline.createDate"
                type="date"
                placeholder="选择时间"
                clearable
                style="width: 170px;"
            />
            </el-form-item>
        <el-form-item>
        <el-button type="primary" icon="Search">搜索</el-button>
        <el-button icon="Delete" @click="reset()">重置</el-button>
        <el-button type="primary" icon="CirclePlusFilled" @click="addForm()">添加</el-button>
        </el-form-item>
    </el-form>
  </div>
  <div class="dect-table">
      <el-table :data="tableData" style="width: 900px; overflow-x: auto !important; margin: 0 auto;">
          <el-table-column prop="num" label="字典编号" width="120"/>
          <el-table-column prop="name" label="字典名称" width="120"/>
          <el-table-column prop="type" label="字典类型" width="120"/>
          <el-table-column prop="stu" label="状态" width="120"/>
          <el-table-column prop="notes" label="备注" width="120"/>
          <el-table-column prop="createT" label="创建时间" width="120"/>
          <el-table-column fixed="right" label="操作" >
              <template #default="scope">
                  <el-button link type="primary" icon="Edit" @click="modify(scope.$index)">
                  修改
                  </el-button>
                  <el-button link type="primary" icon="Delete" @click="del(scope.$index)">
                  删除
                  </el-button>
              </template>
          </el-table-column>
      </el-table>
  </div>

  <el-dialog v-model="addFormVisible" title="Shipping address" width="500">
    <el-form :model="tableInfor">
      <el-form-item label="字典名称">
        <el-input v-model="tableInfor.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="字典类型">
        <el-input v-model="tableInfor.type" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态">
          <el-select v-model="tableInfor.stu" placeholder="字典状态">
              <el-option label="正常" value="正常" />
              <el-option label="停用" value="停用" />
          </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="tableInfor.notes" autocomplete="off" />
      </el-form-item>
      <el-form-item label="创建时间">
          <el-date-picker
              v-model="tableInfor.createT"
              type="date"
              placeholder="选择时间"
              clearable
          />
          </el-form-item>
      <el-form-item></el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addInfor()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
    <el-form :model="tableInfor">
      <el-form-item label="字典名称">
        <el-input v-model="tableInfor.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="字典类型">
        <el-input v-model="tableInfor.type" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态">
          <el-select v-model="tableInfor.stu" placeholder="字典状态">
              <el-option label="正常" value="正常" />
              <el-option label="停用" value="停用" />
          </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="tableInfor.notes" autocomplete="off" />
      </el-form-item>
      <el-form-item label="创建时间">
          <el-date-picker
              v-model="tableInfor.createT"
              type="date"
              placeholder="选择时间"
              clearable
          />
          </el-form-item>
      <el-form-item></el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="chageInfor()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import {ElMessage , ElMessageBox } from 'element-plus'
const dialogFormVisible = ref(false)
const addFormVisible = ref(false)
const formInline = reactive({
  dictName: '',
  dictType: '',
  dictStu: '',
  createDate: '',
})
function reset() {
  formInline.dictName = '';
  formInline.dictType = '';
  formInline.dictStu = '';
  formInline.createDate = '';
}
const tableInfor = ref(
  {
    num:'',
    name: '',
    type: '',
    stu: '',
    notes: '',
    createT: ''
  }
)
let index = ref(0);
/**
 * [
 *   {id:1,dic_name:'性别',mark:''}
 * ]
 * 
 * 
 */
const tableData = ref([
  {
    num: '1',
    name: '性别',
    type: 'user_sex',
    stu: '正常',
    notes: '用户性别列表',
    createT: '2024-10-11 11:11:58',
  },
  {
    num: '2',
    name: '年龄',
    type: 'user_sex',
    stu: '正常',
    notes: '用户性别列表',
    createT: '2024-10-11 11:11:58',
  },
  {
    num: '3',
    name: '用户性别',
    type: 'user_sex',
    stu: '正常',
    notes: '用户性别列表',
    createT: '2024-10-11 11:11:58',
  },
  {
    num: '4',
    name: '用户性别',
    type: 'user_sex',
    stu: '正常',
    notes: '用户性别列表',
    createT: '2024-10-11 11:11:58',
  },
])

function addForm() {
  tableInfor.value.name = '';
  tableInfor.value.type = '';
  tableInfor.value.stu = '';
  tableInfor.value.notes = '';
  tableInfor.value.createT = '';

  addFormVisible.value=true;
}

function addInfor() {
  tableData.value.push(
    {
      num: tableData.value.length+1,
      name:tableInfor.value.name,
      type:tableInfor.value.type,
      stu:tableInfor.value.stu,
      notes:tableInfor.value.notes,
      createT:tableInfor.value.createT
    }
  )
  addFormVisible.value=false;
}

function modify(n) {
  // tableInfor.value = {
  //   ...tableData.value[n]
  // };
  // index.value = n;
  // dialogFormVisible.value=true;
  // return;
  tableInfor.value.name = tableData.value[n].name;
  tableInfor.value.type = tableData.value[n].type;
  tableInfor.value.stu = tableData.value[n].stu;
  tableInfor.value.notes = tableData.value[n].notes;
  tableInfor.value.createT = tableData.value[n].createT;
  index.value = n;
  dialogFormVisible.value=true;
}
function chageInfor() {
  tableData.value[index.value].name=tableInfor.value.name;
  tableData.value[index.value].type=tableInfor.value.type;
  tableData.value[index.value].stu=tableInfor.value.stu;
  tableData.value[index.value].notes=tableInfor.value.notes;
  tableData.value[index.value].createT=tableInfor.value.createT;
  dialogFormVisible.value=false;
}

function del(n) {
  ElMessageBox.confirm(
    '你确定要删除吗？',
    '确定',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      center: true,
    }
  )
    .then(() => {
      tableData.value.splice(n,1);
      ElMessage({
        type: 'success',
        message: '删除成功！',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
}

</script>

<style scoped>
.dect-search{ width: 950px; margin: 30px 0 30px 250px;}
</style>